/**
 * 事件渲染器
 * 负责渲染事件列表和卡片
 */

import { UIRenderer } from './UIRenderer.js';

export class EventRenderer {
    /**
     * 渲染事件列表
     * @param {Array} events - 事件显示信息列表
     * @param {Function} onChoice - 选择回调
     * @param {string} containerId - 容器ID
     */
    static renderEventList(events, onChoice, containerId = 'events-list') {
        const container = document.getElementById(containerId);
        if (!container) return;

        UIRenderer.clearContainer(container);

        if (events.length === 0) {
            UIRenderer.showEmptyState(container, '暂无事件', 'fa-bell-slash');
            return;
        }

        events.forEach(event => {
            const card = this.createEventCard(event, onChoice);
            container.appendChild(card);
        });
    }

    /**
     * 创建事件卡片 - 现代化版本
     * @param {Object} event - 事件信息
     * @param {Function} onChoice - 选择回调
     * @returns {HTMLElement} 事件卡片元素
     */
    static createEventCard(event, onChoice) {
        const card = document.createElement('div');
        card.className = 'event-card-modern';

        // 标题
        const title = document.createElement('h3');
        title.className = 'event-title';
        title.innerHTML = `<i class="fa fa-bolt"></i>${event.name}`;

        // 描述
        const desc = document.createElement('p');
        desc.className = 'event-desc';
        desc.textContent = event.description;

        card.appendChild(title);
        card.appendChild(desc);

        // 如果是选择事件，显示选项
        if (event.type === 'choice' && event.optionsWithStatus) {
            const optionsContainer = document.createElement('div');
            optionsContainer.className = 'event-options';

            event.optionsWithStatus.forEach((option, index) => {
                const optionButton = this.createOptionButton(
                    option,
                    index,
                    event.id,
                    onChoice
                );
                optionsContainer.appendChild(optionButton);
            });

            card.appendChild(optionsContainer);
        }
        // 如果是奖励事件，显示领取按钮
        else if (event.type === 'reward') {
            const claimButton = document.createElement('button');
            claimButton.className = 'btn-modern btn-primary';
            claimButton.style.width = '100%';
            claimButton.innerHTML = '<i class="fa fa-gift"></i><span>领取奖励</span>';
            claimButton.addEventListener('click', () => onChoice(event.id, 0));
            card.appendChild(claimButton);
        }

        UIRenderer.addFadeInAnimation(card);
        return card;
    }

    /**
     * 创建选项按钮 - 现代化版本
     * @param {Object} option - 选项信息
     * @param {number} index - 选项索引
     * @param {string} eventId - 事件ID
     * @param {Function} onChoice - 选择回调
     * @returns {HTMLElement} 选项按钮元素
     */
    static createOptionButton(option, index, eventId, onChoice) {
        const button = document.createElement('button');
        button.className = 'event-option-btn';

        if (!option.canAfford) {
            button.disabled = true;
        }

        let buttonText = option.text;

        // 如果有需求，显示需求
        if (option.requirements && Object.keys(option.requirements).length > 0) {
            const reqText = this.formatRequirements(option.requirements);
            buttonText += ` <span style="font-size: 0.75rem; color: #94A3B8;">(需要: ${reqText})</span>`;
        }

        // 如果资源不足，显示提示
        if (!option.canAfford) {
            buttonText += ' <span style="font-size: 0.75rem; color: #EF4444;">(资源不足)</span>';
        }

        button.innerHTML = buttonText;

        if (option.canAfford) {
            button.addEventListener('click', () => onChoice(eventId, index));
        }

        return button;
    }

    /**
     * 格式化需求文本
     * @param {Object} requirements - 需求对象
     * @returns {string} 格式化的文本
     */
    static formatRequirements(requirements) {
        const parts = [];

        if (requirements.wood) {
            parts.push(`${requirements.wood}木材`);
        }
        if (requirements.food) {
            parts.push(`${requirements.food}粮食`);
        }

        return parts.join(', ');
    }
}
